<script setup lang="ts">
import { ref } from 'vue'
import { TFormOption, TBtnOption, TBtnClick, TFormData} from '../../../types/formArea'

// 父组件传递的参数
let props = defineProps<{
  formOption: TFormOption[]
  formData: TFormData
  btnOption: TBtnOption[]
}>()

// 为了符合 单项数据流 的规范
// 复制一份 父组件传递过来的 formData 给本页面使用
let currFormData = ref(JSON.parse(JSON.stringify(props.formData)))

// onSubmit: 表单的提交事件
// let emits = defineEmits(['onSubmit'])
let emits = defineEmits<{
  (e: 'onSubmit', formData: TFormData): void
}>()

// 按钮的点击事件处理函数
const btnClick:TBtnClick = (type) => {
  // 提交按钮(一般用于查询)
  if( type === 'primary'){
    emits('onSubmit', currFormData.value)
    return 
  }
  // 取消按钮, 备用
  if( type === 'cancel'){
    // do cancel
    return 
  }
  // 重置按钮
  if( type === 'reset'){
    // do reset ...
    return 
  }
}
</script>
<template>
  <div class="formArea">
    <el-form :model="currFormData" label-width="120px" inline>
      <el-form-item :label="item.label" v-for="(item, index) in formOption" :key="index">
        <el-input
          v-if="item.type === 'input'"
          type="text"
          v-model.trim="currFormData[item.model]"
          :placeholder="item.placeholder"/>
        <el-select
          v-if="item.type === 'select'"
          v-model="currFormData[item.model]"
          :placeholder="item.placeholder">
          <el-option label="所有" value="" />
          <el-option v-for="(op, idx) in item.children" :key="idx" :label="op.label" :value="op.value" />
          <!-- <slot name="option"></slot> -->
        </el-select>
        <el-date-picker
          name="createTime"
          v-if="item.type === 'date'"
          v-model.trim="currFormData[item.model]"
          type="daterange"
          size="medium"
          range-separator="-"
          :start-placeholder="item.placeholder[0]"
          :end-placeholder="item.placeholder[1]">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          v-for="(item, index) in btnOption"
          :key="index"
          :type="item.elType"
          @click="btnClick(item.btnType)">
            {{item.text}}
          </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style lang="scss" scoped>
    
</style>